<template>
  <div class="card-cell" :class="{ 'primary-type': primary }">
    <div class="cell-title"> {{ label }}： </div>
    <div class="cell-content">
      <span class="cell-value" :class="[color + '_font', linkValue ? 'is-link' : '']" @click="valueClick">{{ formatValue }}{{ unit }}</span>
      <ve-tooltip v-if="$slots.tooltip" placement="top">
        <template #content><slot name="tooltip"></slot></template>
        <ve-icon class="help-icon" name="headertipsgray" size="32"></ve-icon>
      </ve-tooltip>
      <slot> </slot>
    </div>
  </div>
</template>

<script setup name="CardCell">
  import { computed } from 'vue'
  import { formatNumber } from '@/utils/index'

  const props = defineProps({
    label: String,
    value: [String, Number],
    unit: {
      type: String,
      default: '元',
    },
    linkValue: Boolean,
    primary: Boolean,
    blackValue: Boolean,
    color: {
      type: String,
      default: 'blue', // black red green
    },
  })
  const emits = defineEmits(['valueClick'])

  const formatValue = computed(() => {
    let val = Number(props.value) || 0
    if (props.unit != '元') return val
    return formatNumber(val, props.thousandth)
  })
  const valueClick = () => {
    emits('valueClick')
  }
</script>

<style lang="less" scoped>
  .card-cell {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    font-weight: 400;
    font-size: 28rpx;
    color: #1d2129;
    line-height: 36rpx;
    &.primary-type {
      font-weight: bold;
    }

    .cell-content {
      display: flex;
      align-items: center;
      flex-shrink: 1;
      word-break: break-all;
      color: #1890ff;
      margin-right: 4px;
      .black_font {
        color: #1d2129;
      }
      .red_font {
        color: #ec6571;
      }
      .green_font {
        color: #5bbc3e;
      }
      .is-link {
        cursor: pointer;
        text-decoration: underline;
      }
      .help-icon {
        margin-left: 8rpx;
      }
    }

    & + & {
      margin-top: 8rpx;
    }
  }
</style>
